<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenLayers引用</title>
  <link rel="stylesheet" href="../assets/v6.15.1-dist/ol.css">
  <script src="../assets/v6.15.1-dist/ol.js"></script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map" class="map"></div>

  <script>
    // 初始化地图
    var map = new ol.Map({
      target: 'map',  // 绑定 DIV 元素
      // 添加图层
      layers: [
        new ol.layer.Tile({
          // 设置图层的数据源
          source: new ol.source.OSM()
        }),
      ],
      // 设置视图窗口
      view: new ol.View({
        projection: "EPSG:4326",
        center: [112, 32],
        zoom: 5
      })
    });

    // 加载高德地图
    const tileLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
      })
    });
    map.addLayer(tileLayer);


  </script>

</body>

</html>